<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户总数</span>
          </div>
          <div class="card-content">
            <div class="count">{{ userCount }}</div>
            <div class="trend">
              <i class="el-icon-arrow-up"></i> 12% <span class="text">较上月</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>活跃用户</span>
          </div>
          <div class="card-content">
            <div class="count">{{ activeUserCount }}</div>
            <div class="trend">
              <i class="el-icon-arrow-up"></i> 8% <span class="text">较上月</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日访问</span>
          </div>
          <div class="card-content">
            <div class="count">{{ todayVisits }}</div>
            <div class="trend">
              <i class="el-icon-arrow-down"></i> 3% <span class="text">较昨日</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>系统消息</span>
          </div>
          <div class="card-content">
            <div class="count">{{ messageCount }}</div>
            <div class="trend">
              <i class="el-icon-arrow-up"></i> 5 <span class="text">条新消息</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix">
            <span>最近访问</span>
          </div>
          <el-table
            :data="recentVisits"
            stripe
            style="width: 100%">
            <el-table-column
              prop="username"
              label="用户名">
            </el-table-column>
            <el-table-column
              prop="ip"
              label="IP地址">
            </el-table-column>
            <el-table-column
              prop="location"
              label="位置">
            </el-table-column>
            <el-table-column
              prop="time"
              label="访问时间">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>系统状态</span>
          </div>
          <div class="system-status">
            <div class="status-item">
              <span>CPU使用率</span>
              <el-progress :percentage="cpuUsage" :color="cpuUsage > 80 ? '#f56c6c' : '#67c23a'"></el-progress>
            </div>
            <div class="status-item">
              <span>内存使用率</span>
              <el-progress :percentage="memoryUsage" :color="memoryUsage > 80 ? '#f56c6c' : '#67c23a'"></el-progress>
            </div>
            <div class="status-item">
              <span>磁盘使用率</span>
              <el-progress :percentage="diskUsage" :color="diskUsage > 80 ? '#f56c6c' : '#67c23a'"></el-progress>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userCount: 12580,
      activeUserCount: 8965,
      todayVisits: 1254,
      messageCount: 15,
      recentVisits: [
        { username: '张三', ip: '192.168.1.100', location: '北京', time: '2025-07-07 08:30:25' },
        { username: '李四', ip: '192.168.1.101', location: '上海', time: '2025-07-07 09:15:42' },
        { username: '王五', ip: '192.168.1.102', location: '广州', time: '2025-07-07 10:05:18' },
        { username: '赵六', ip: '192.168.1.103', location: '深圳', time: '2025-07-07 11:20:30' }
      ],
      cpuUsage: 45,
      memoryUsage: 60,
      diskUsage: 30
    }
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.box-card {
  height: 200px;
}

.card-content {
  padding: 10px;
}

.count {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
}

.trend {
  font-size: 14px;
}

.text {
  color: #999;
  margin-left: 5px;
}

.system-status {
  padding: 10px;
}

.status-item {
  margin-bottom: 20px;
}
</style>    